<template>
    <div>
        <el-form :inline="true" :model="form" style="marigin:20px" :rules="rules" ref="ruleForm" label-width="120px">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span style="line-height:36px">文章编辑</span>
                    <el-button type="primary" style="float:right;background-color:rgb(118,149,255);border-color:rgb(118,149,255)" @click="submitArticleInfo('ruleForm')">保存</el-button>
                </div>
                <div>
                    <el-form-item label="标题" prop="Title">
                        <el-input v-model="form.Title" class="w49"></el-input>
                    </el-form-item>
                    <el-form-item label="作者" prop="Author">
                        <el-input v-model="form.Author" class="w49"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" prop="CreateTime">
                        <el-date-picker type="date" placeholder="请选择开始时间" v-model="form.CreateTime" style="width:195px" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>     
                    <el-form-item label="文章详情" prop="Content">
                        <articalDetail @contentChange="getContentChange" :init-info="initInfo"></articalDetail>
                    </el-form-item>   
                </div>
            </el-card>
        </el-form>
    </div>
</template>
<script>
import {updateArticle,createArticle} from '../../api/api';
import articalDetail from "./articalDetail";
export default {
    props:["articleInfo","ifOpen"],
    data(){
        return{
            form:{
                Id: Number,
                CreateTime:'',
                Author:'',
                Title:"",
                Content:''
            },
            initInfo:"",
            rules: {
                Title: [
                    { required: true, message: "请输入项目名称", trigger: "blur" },
                    { max:18,message:'标题最大为18个字数'}
                ],
                Author: [{ required:true,message: "请输入文章作者",trigger: "blur" }],
                CreateTime: [{required:true, message: "请选择创建时间", trigger: "blur" }],
                Content: [{required:true, message: "请输入文章内容", trigger: "blur" }],
            },
        }
    },
    methods:{
        //加载初始数据
        LoadInitData: function() {
          this.form.Id = "";
          if (this.articleInfo) {
            console.log("加载的文章详情======>", this.articleInfo);
            this.initInfo = JSON.parse(
              JSON.stringify(this.articleInfo.Content)
            );
            this.form = JSON.parse(JSON.stringify(this.articleInfo));
          } else {
            this.initInfo="";
            this.form={};
          }
        },
        getContentChange(res) {
            this.form.Content = res.ProductDetail;
        },
        submitArticleInfo:function(formName){
            // this.$refs[formname].validate(valid=>{
            //     if(valid){
                    if(this.form.Id){ //准备执行更新文章操作
                        if(this.articleInfo){
                            this.$confirm('是否确定更新此文章?','提示',{
                                confirmButtonText:'确定',
                                cancelButtonText:'取消'
                            }).then(()=>{
                                let param=this.form;
                                updateArticle(param).then(res=>{
                                    if(res.data.IsSuccess){
                                        this.$message({
                                            type:'success',
                                            message:'文章更新成功'
                                        });
                                        this.$emit('getNew');
                                    }else{
                                        this.$message({
                                            type: "warning",
                                            message: "文章修改失败，请稍后再试"
                                        });
                                    }
                                })
                            }).catch(()=>{
                                this.$message({
                                    message: "已取消更新"
                                });
                            })
                        }
                    }else{
                            this.$confirm('是否确定创建新的文章?','提示',{
                                confirmButtonText:'确定',
                                cancelButtonText:'取消'
                            }).then(()=>{
                                let param={
                                    CreateTime:this.form.CreateTime,
                                    Author:this.form.Author,
                                    Title:this.form.Title,
                                    Content:this.form.Content
                                }
                                createArticle(param).then(res=>{
                                    if(res.data.IsSuccess){
                                        this.$message({
                                            type: "success",
                                            message: "文章添加成功"
                                        });
                                        this.$emit('getNew');
                                    }else{
                                        this.$message({
                                           type: "warning",
                                           message: "文章添加失败，请稍后再试"
                                        });
                                    }
                                })
                            }).catch(()=>{
                                this.$message({
                                    message:'已取消'
                                })
                            })
                        }
                }
        //     })
        // }
    },
    components:{
        articalDetail
    },
    watch:{
        ifOpen: function() {
            this.LoadInitData();
        }, 
    },
    mounted() {
        this.LoadInitData();
    },
}
</script>
<style lang="scss" scoped>

</style>


